import React, { Component } from "react";
import {
  View,
  Text,
  ActivityIndicator,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  RefreshControl,
  Linking
} from "react-native";
import { getPatientReports } from "../../api/config";
import { colors } from "../../Style/Colors";
import _ from "lodash";
import NoDataFound from "../../Components/NoDataFound";
import { setDate } from "../../Components/SetDate";
import Toast from "react-native-simple-toast";

class ViewReport extends Component {
  state = {
    isLoading: true,
    param: "",
    resultText: "",
    data: [],
    refreshing: false
  };
  componentDidMount = async () => {
    this.getData();
  };

  getData = () => {
    try {
      const { type, refNo } = this.props.screenProps;
      getPatientReports(type, refNo)
        .then(data => {
          var groups = _.groupBy(data, "INVEST_DESCRIPTION");
          var array = [];
          _.forOwn(groups, function(value, key) {
            array.push({
              key: key,
              value: value,
<<<<<<< HEAD
              fromData: value[0].FROMDT,
              accessionNumber: value[0].ACCESSIONNUMBER
            });
          });
          this.setState({ data: array, isLoading: false, refreshing: false });
=======
              fromData: value[0].FROMDT
            });
          });
          console.log(array);
          this.setState({ data: array, isLoading: false });
>>>>>>> 503b0544130247b48d86f53bc47ed722f01e5c05
        })
        .catch(e => Toast.show(e.message));
    } catch (e) {
      Toast.show(e.message);
    }
  };

  onRefresh = () => {
    this.setState({ refreshing: true, isLoading: true });
    this.getData();
  };

  render() {
    const { data, isLoading, refreshing } = this.state;
    const { patientData } = this.props.screenProps;
    return (
<<<<<<< HEAD
      <View style={styles.container}>
=======
      <ScrollView style={styles.container}>
>>>>>>> 503b0544130247b48d86f53bc47ed722f01e5c05
        {isLoading ? (
          <ActivityIndicator size="large" color={colors.primaryColor} />
        ) : this.state.data.length === 0 ? (
          <NoDataFound />
        ) : (
<<<<<<< HEAD
          <ScrollView
            showsVerticalScrollIndicator={false}
            refreshControl={
              <RefreshControl
                colors={[colors.primaryColor]}
                refreshing={refreshing}
                onRefresh={this.onRefresh}
              />
            }
          >
            {data.map((data, i) => (
              <React.Fragment key={i}>
                <TouchableOpacity
                  onPress={() => {
                    requestAnimationFrame(() => {
                      this.props.screenProps.navigation.navigate("Report", {
                        patientData,
                        reportName: data.key,
                        values: data.value
                      });
                    });
                  }}
                  activeOpacity={0.8}
                  style={styles.wrapper}
                >
                  <Text style={styles.title}>{data.key}</Text>
                  <View style={styles.bottomContainer}>
                    <Text style={styles.date}>{setDate(data.fromData)}</Text>
                    <View style={{ flexDirection: "row" }}>
                      {data.accessionNumber ? (
                        <TouchableOpacity
                          onPress={() => {
                            Linking.openURL(
                              `http://103.71.65.184/Launch_Viewer.asp?AccessionNumber=${
                                data.accessionNumber
                              }&Username=hisuser&Password=hisuser`
                            );
                          }}
                          style={styles.btnWrapper}
                        >
                          <Text style={styles.btnText}>View Image</Text>
                        </TouchableOpacity>
                      ) : (
                        <View />
                      )}
                      <TouchableOpacity style={styles.btnWrapper}>
                        <Text style={styles.btnText}>View</Text>
                      </TouchableOpacity>
                    </View>
                  </View>
                </TouchableOpacity>
              </React.Fragment>
            ))}
          </ScrollView>
=======
          data.map((data, i) => (
            <React.Fragment key={i}>
              <TouchableOpacity
                onPress={() => {
                  this.props.screenProps.navigation.navigate("Report", {
                    reportName: data.key,
                    values: data.value
                  });
                }}
                activeOpacity={0.8}
                style={styles.wrapper}
              >
                <Text style={styles.title}>{data.key}</Text>
                <Text style={styles.data}>{data.fromData}</Text>
              </TouchableOpacity>
            </React.Fragment>
          ))
>>>>>>> 503b0544130247b48d86f53bc47ed722f01e5c05
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
<<<<<<< HEAD
    marginBottom: 4,
=======
    paddingVertical: 4,
>>>>>>> 503b0544130247b48d86f53bc47ed722f01e5c05
    backgroundColor: colors.offWhite
  },
  wrapper: {
    backgroundColor: colors.whiteColor,
    padding: 8,
    marginVertical: 2,
    marginHorizontal: 6,
    borderWidth: 0.3,
    borderColor: colors.lightGrey
  },
  title: {
    fontSize: 16,
    color: "#333",
    marginVertical: 4,
    marginBottom: 16
  },
  date: {
    fontSize: 14
  },
  bottomContainer: {
    flexDirection: "row",
    justifyContent: "space-between"
  },
  btnText: {
    color: "#333"
  },
  btnWrapper: {
    marginHorizontal: 4
  }
});

export default ViewReport;
